<template>
	<view class="process">
		<headassy title="申请备件" :isTab="false" :isSearch="false"></headassy>
		
		<view class="process-content">
			<view class="u-flex top">
				<view class="">
					申请类型
				</view>
				<u-radio-group icon-size="36" v-model="workUser.applyType" active-color="#fd7400"
					style="display: flex;justify-content: space-around;">
					<u-radio v-for="(item, index) in radiolist2" :key="index" labelSize="14px" size="20px" iconSize="16px"
						:label="item.name" :name="item.name" @change="radioChange" class="mr-5">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="form" style="">
				<view class="" v-for="(item,index) in form.orderSpares" :key="index"
					style="border-bottom: 1px solid #f5f5f5;">
					<view class="u-flex-between" style="padding-right: 15px;">
						<view class="left">
							备件{{index}}
						</view>
						<view class="right">
							<view class="cus-red-btn" @click="delitem(index)">
								删除
							</view>
						</view>
					</view>
					<u--form labelPosition="left" ref="uForm">
						<u-form-item label="备件名称" borderBottom ref="item1" labelWidth="200rpx" @click="openSpare(index)">
							<u--input disabled border="none" disabledColor="#ffffff" placeholder="请选择备件名称"
								v-model="item.processname"></u--input>
						</u-form-item>
						<u-form-item label="备件规格" borderBottom ref="item1" labelWidth="200rpx"
							@click="openSpareSparts(index)">
							<u--input disabled disabledColor="#ffffff" border="none" placeholder="请选择备件规格"
								v-model="item.processgg"></u--input>
						</u-form-item>
						<u-form-item label="备件数量" borderBottom ref="item1" labelWidth="200rpx">
							<u--input disabledColor="#ffffff" border="none" placeholder="请输入备件数量"
								v-model="item.processnum"></u--input>
						</u-form-item>
						<u-form-item label="备件费用" borderBottom ref="item1" labelWidth="200rpx">
							<u--input disabledColor="#ffffff" border="none" v-model="item.processmoney"></u--input>
						</u-form-item>
						<u-form-item label="附件" ref="item1" labelWidth="200rpx">
							<u-upload @afterRead="afterRead($event, index)" @delete="deleteImg($event, index)" name="1"
								multiple :maxCount="10" width="74px" height="74px" :fileList="item.imglist"></u-upload>
						</u-form-item>
					</u--form>
				</view>
			</view>
			<view class="add">
				<view class="cus-oragen-btn" @click="addSpare">
					增加备件+
				</view>
			</view>
			<!-- 收货信息 -->
			<view class="form" style=" margin-bottom: 140rpx;">
				<u--form labelPosition="left" ref="uForm" :model="workUser">
					<u-form-item label="收货地址类型" borderBottom ref="item1" labelWidth="200rpx" @click="addressType">
						<view v-if="!workUser.receiptType" :style="{ color: color || '' }">
							新的地址
						</view>
						<u--input v-if="workUser.receiptType" disabled disabledColor="#ffffff" border="none" v-model="workUser.receiptType"></u--input>
					</u-form-item>
					<u-form-item label="收货姓名" borderBottom ref="item1" labelWidth="200rpx">
						<u--input disabledColor="#ffffff" border="none" placeholder="请输入收货姓名"
							v-model="workUser.receiptName"></u--input>
					</u-form-item>
					<u-form-item label="收货电话" borderBottom ref="item1" labelWidth="200rpx">
						<u--input disabledColor="#ffffff" border="none" placeholder="请输入收货电话"
							v-model="workUser.receiptPhone"></u--input>
					</u-form-item>
					<u-form-item @click="address" label="登记地址:" borderBottom ref="item1" labelWidth="200rpx">
						<span v-show="!workUser.address" class="text-orange" :style="{ color: color || '' }">选择</span>
						<span class="address-color" v-show="workUser.address">{{ workUser.address }}</span>
					</u-form-item>
					<u-form-item label="审核备注" borderBottom ref="item1" labelWidth="200rpx">
						<u--input disabledColor="#ffffff" border="none" v-model="workUser.remark"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		
		<!-- <view class="pd10">
			<button class="save-btn" iconColor="#fd7400" @click="saveSpare">确 认 申 请</button>
		</view> -->
		<view class="footer">
			<button  class="save-btn" @click="saveSpare">确认申请</button>
		</view>
		<!-- 选择备件 -->
		<view class="">
			<u-popup :show="show" mode="bottom" @close="show=false">
				<view style="">
					<view class="u-flex-between" style="align-items: center;padding: 10px;">
						<p class="text-gray">选择备件</p>
						<view class="">
							<u-search shape="square" height="56rpx" searchIconSize="22px" @search="searchcustom"
								v-model="val" :showAction="false"></u-search>
						</view>
					</view>
					<view class="" style="border: 1px solid #f5f5f5;">
						<view class="" style="max-height: 500rpx;overflow-y: auto;height: calc(-82px + 60vh)">
							<view class="mt-5">
								<view class="list-item" v-for="item in sparelist" :key="item.id"
									@click="selectSpare(item)">
									{{item.title}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 省市区弹窗 -->
		<u-popup :show="addressShow" @close="addressClose">
			<view style="width:100vw;height:300px;margin-left:-1px;background-color:#fff;" class="bg-white">
				<select-addr :names="addrnames" @selectAddr="selectAddr"></select-addr>
			</view>
		</u-popup>
		<!-- 地址类型 -->
		<u-picker :immediateChange="true"  :show="show3" :columns="addressList" :closeOnClickOverlay="true" @close="show3=false" @confirm="confirm"></u-picker>
		<!-- 备件规格 -->
		<u-picker :show="show4" :columns="sparePartsList" :closeOnClickOverlay="true" @close="show4=false"
			@confirm="confirm2" keyName="specName"></u-picker>
	</view>
</template>

<script>
	import SelectAddr from '@/pagesA/pages/components/selectAddr';
	export default {
		components: {
			SelectAddr
		},
		data() {
			return {
				show: false,
				show2: false,
				show3: false,
				show4: false,
				addressShow: false,
				workId: '',
				custAccId: '',
				color: '', //跳转过来的背景颜色
				form: {
					orderSpares: [{
						processname: '',
						processgg: '',
						processnum: '',
						processmoney: '',
						value: '',
						imglist: []
					}]
				},
				addrnames: ['省份', '城市', '县/区', '城镇'],
				sparelist: [],
				bzvalue: '',
				radiolist2: [{
						name: '厂家备件',
						disabled: false
					},
					{
						name: '自购备件',
						disabled: false
					}
				],
				workUser: {
					acId: '',
					workId: '',
					custAccId: '',
					applyType: '',
					receiptType: '',
					receiptName: '',
					receiptPhone: '',
					address: '',
					remark: ''
				},
				val: '',
				addressList: [
					['用户地址', '新的地址', '网点地址']
				],
				sparePartsList: [],
				lastIndex: -1
			}
		},
		onLoad(e) {
		
			this.workUser.acId = uni.getStorageSync('acId')
			this.workId = e.workId
			this.workUser.workId = e.workId
			this.custAccId = uni.getStorageSync('custAccid')
			
			this.get_SpareSelect()
			
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				
				this.get_SpareSelect()
				
			},
			// 搜索备件
			async get_SpareSelect() {
				const res = await uni.$api.work.getSpareSelect({
					workId: this.workId,
					custAccId: this.custAccId
				})
				this.sparelist.push(res.data.dataList)
				this.get_WorkSpare()
			},
			// 查询备件记录
			async get_WorkSpare() {
				const res = await uni.$api.work.getWorkSpare({
					workId: this.workId,
				})
				this.find_Warehousing()
			},
			// 查备件仓库,需要选择备件规格
			async find_Warehousing() {
				const res = await uni.$api.work.findWarehousing({
					custAccId: this.custAccId
				})
				uni.stopPullDownRefresh()
			},
			address() {
				this.addressShow = true
			},
			addressClose() {
				this.addressShow = false
			},
			// 增加备件
			addSpare() {
				this.form.orderSpares.push({
					processname: '',
					processgg: '',
					processnum: '',
					processmoney: '',
					value: '',
					imglist: []
				})
				console.log(this.form)
			},
			// 删除备件
			delitem(index) {
				console.log(index)
				this.form.orderSpares.splice(index, 1)
			},
			// 选择地址
			selectAddr(value) {
				console.log('选择地址', value)
				this.addressShow = false;
				this.workUser.address = value.join('-');
			},
			radioChange(n) {
				console.log('radioChange', n)
				this.workUser.applyType = n
			},
			groupChange(n) {
				console.log('groupChange', n)
				this.workUser.applyType = n
			},
			// 打开备件
			openSpare(index) {
				this.show = true;
				this.lastIndex = index;
				console.log(index)
				this.getSpare()
				// 选择备件
			},
			// 获取备件列表
			async getSpare() {
				const res = await uni.$api.spare.getSpare({
					custAccId: this.custAccId,
					workId: this.workId
				})
				console.log(res)
				this.sparelist = res.data.dataList
			},
			selectSpare(item) {
				console.log(item)
				this.getSpareParts(item.id)
				console.log(this.form.orderSpares)
				this.show = false;
				this.form.orderSpares[this.lastIndex].processname = item.title
			},
			// 地址类型
			addressType() {
				this.show3 = true
			},
			async confirm(e) {
				console.log('confirm', e, this.workId)
				let that = this
				that.show3 = false
				switch (e.value[0]) {
					case '网点地址':
						const res = await uni.$api.spare.getNetWorkAddress({
							workId: that.workId
						})
						console.log(res, '网点地址')
						this.workUser.address = res.data.netAddr.province + '-' + res.data.netAddr.city + '-' + res
							.data.netAddr.area + '-' + res.data.netAddr.address
						this.workUser.receiptType = e.value[0]
						this.workUser.receiptPhone = res.data.network.phone
						this.workUser.receiptName = res.data.network.principal
						break;
					case '用户地址':
						const res2 = await uni.$api.spare.getUserAddress({
							workId: that.workId
						})
						console.log(res2, '用户地址')
						this.workUser.address = res2.data.address
						this.workUser.receiptType = e.value[0]
						this.workUser.receiptPhone = res2.data.phone
						this.workUser.receiptName = res2.data.name
						break;
					case '新的地址':
						this.workUser.address = ''
						this.workUser.receiptType = ''
						this.workUser.receiptPhone = ''
						this.workUser.receiptName = ''
						break;
					default:
						break;
				}

			},
			// 获取备件规格
			async getSpareParts(spareId) {
				const res = await uni.$api.spare.getSpareParts({
					spareId: spareId
				})
				console.log(res, this.sparePartsList, '备件规格')
				let arr = []
				arr.push(res.data)
				console.log(arr)
				this.sparePartsList = arr
				console.log(this.sparePartsList, 'this.sparePartsList')
			},
			confirm2(e) {
				this.show4 = false
				this.form.orderSpares[this.lastIndex].processgg = e.value[0].specName
				console.log('confirm2', e.value)
				//this.form.orderSpares.processgg = e.value[0].specName
				//console.log(this.form.orderSpares.processgg)
			},
			// 打开备件规格
			openSpareSparts(index) {
				this.show4 = true
				this.lastIndex = index;
			},
			async saveSpare() {
				let data = {
					orderSpares: [],
					...this.workUser
				}
				this.form.orderSpares.forEach((item, index) => {
					let list = [];
					item.imglist.forEach(img => {
						if (img.load == 1) {
							list.push(img.img)
						}
					});
					data.orderSpares.push({
						partIds: "44318", //详情返回的id
						partNames: item.processname, //名称
						partSpec: item.processgg, //规格
						partSku: "HKTBJB0002", //sku
						nums: item.processnum, //数量
						fees: item.processmoney, //费用
						files: list.join(',') //图片地址，多个用逗号隔开
					})
				});
				// data.orderSpares = JSON.stringify(data.orderSpares);
				// console.log(data)
				// return;
				const res = await uni.$api.spare.saveSpare(data);
				console.log(res)
				if (res.code === 0) {
					uni.showToast({
						title: '申请成功'
					})
					uni.navigateTo({
						url: '/pages/index/staging'
					})
				}
				console.log(data);
			},
			deleteImg(e, index) {
				console.log(e, index);
				this.form.orderSpares[index].imglist.splice(e.index, 1);
			},
			afterRead(e, index) {
				e.file.forEach((item, idx) => {
					this.form.orderSpares[index].imglist.push({
						url: item.url,
						img: '',
						load: 0
					});
					this.uploadimg(item.url, index, this.form.orderSpares[index].imglist.length - 1);
				});
				console.log(e, index)
			},
			// 费用上传图片
			async uploadimg(url, index, i) {
				const res = await uni.$api.work.uploadimg(this.custAccId, {
					name: 'file',
					filePath: url
				});
				if (res.data) {
					this.form.orderSpares[index].imglist[i].img = res.data;
					this.form.orderSpares[index].imglist[i].load = 1;
				}
				console.log('uploadimg', res, this.form.orderSpares[index])
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	.process {
		background-color: #f5f5f5;
		min-height: 100vh;
		
		.process-content {
			padding: 20rpx;
		}
		
		/deep/.u-radio__icon-wrap {
			width: 48rpx !important;
			height: 48rpx !important;
		}
		/deep/.u-radio-group--row {
			justify-content: flex-end;
		}
		
		.top {
			padding: 30rpx 38rpx 28rpx 0;
			padding-left: 32rpx;
			background: $uni-bg-color;
			border-bottom: 1px solid #f5f5f5;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
		
		.radio {
			flex: 1;
		}
		
		.form {
			background: $uni-bg-color;
			padding-left: 15px;
			border-radius: 10rpx;
		
			.form-top {
				padding: 30rpx 38rpx 28rpx 0;
				border-bottom: 1px solid #f5f5f5;
				padding-left: 32rpx;
			}
		
		
		}
		
		.add {
			background-color: #f5f5f5;
			padding: 30rpx 38rpx 28rpx 0;
			padding-left: 32rpx;
			justify-content: flex-end;
		}
		
		.form2 {
			padding: 15px 19px 14px 0;
			padding-left: 15px;
			background-color: #fff;
			border-bottom: 1px solid #f5f5f5;
		}
		
		.footer {
			padding: 10px;
			background: #fff;
			bottom: 0;
			width: 100%;
			border-top: solid 1px #f2f2f2;
			box-sizing: border-box;
			position: fixed;
			z-index: 100;
		}
		
		.save-btn {
			background-color: #fd7400;
			color: #fff;
		}
		
		.address-color {
			color: #505050;
		}
		
		.left {
			position: relative;
			height: 46px;
			line-height: 46px;
		}
		
		.left::after {
			content: "";
			width: 32px;
			height: 3px;
			background: #fd7400;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		
		.add {
			padding: 10px 20px;
			display: flex;
			background-color: #f5f5f5;
		}
		
		.list-item {
			border-top: solid 1px #f6f6f6;
			line-height: 1.75;
			margin-left: 10px;
			padding: 3px 5px;
		}
	}
	
</style>